<template>
	<view>
		<view class="customer-content">
			<image class="customer-title-img" src="../../static/img/img_bg_customer_title.png" mode="widthFix" />
			<view class="customer-content-con">
				<view class="title-style">联系客服</view>
				<view class="subtitle-style">
					<view>使用过程中有任何问题可以联系客服热线</view>
					<view>我们将竭诚为您服务</view>
				</view>
				<view class="customer-mobile flex rcb" @tap="_onMakeCall">
					<view class="item-left">
						<text class="item-title">客服电话</text>
						<text class="item-context item-context-cur">{{customer_tel}}</text>
					</view>
					<!-- <text class="item-icon">></text> -->
					<text class="cuIcon-right f-999"></text>
				</view>
				<view class="line-style horizontal-line" />
				<view class="customer-mobile flex rcb" @tap="_setClipboardData">
					<view class="item-left">
						<text class="item-title">客服微信</text>
						<text class="item-context">{{customer_wechat}}</text>
					</view>
					<text class="item-btn">复制</text>
				</view>
			</view>
		</view>
		<image class="customer-bg-img" src="../../static/img/img_bg_customer.png" mode="widthFix" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				customer_tel: '',
				customer_wechat: '',
			}
		},
		onLoad() {
			this.getContactInfo();
		},
		methods: {
			async getContactInfo() {
				let url = this.ServicesApi.contact_info;
				let data = {};
				let result = await this.Services.post(url, data);
				if (result.code === this.StatusCode.SUCCESS_CODE) {
					this.customer_tel = result.data.customer_tel;
					this.customer_wechat = result.data.customer_wechat;
				}
			},
			_onMakeCall() {
				uni.makePhoneCall({
					phoneNumber: this.customer_tel,
				});
			},
			_setClipboardData() {
				uni.setClipboardData({
					data: this.customer_wechat,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功',
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.customer-content {
		min-height: 70vh;
		margin: 80rpx 30rpx;
		background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
		box-shadow: 0rpx 12rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
	}

	.customer-title-img {
		width: 100%;
	}

	.title-style {
		color: #333333;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.subtitle-style {
		color: #666666;
		text-align: center;
		line-height: 44rpx;
		margin: 20rpx 40rpx 40rpx;
	}

	.customer-content-con {
		padding: 40rpx;
	}

	.customer-mobile {
		margin: 30rpx 0;
	}

	.customer-mobile .horizontal-line {
		margin: 20rpx 0;
	}

	.item-title {
		color: #666666;
		font-size: 32rpx;
		margin-right: 30rpx;
	}

	.item-context {
		font-size: 36rpx;
		color: #333333;
	}

	.item-context-cur {
		color: #0C73EC;
	}

	.item-icon {
		color: #333333;
		font-size: 36rpx;
	}

	.item-btn {
		color: #036DE8;
		font-size: 32rpx;
		padding: 4rpx 20rpx;
		background: #F0F7FF;
		border-radius: 48rpx;
		border: 2rpx solid #036DE8;
	}

	.customer-bg-img {
		left: 0;
		bottom: 0;
		width: 100vw;
		position: absolute;
	}
</style>
